<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.组件的基本使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue中使用组件的三大步骤：
							第一步：定义组件（创建组件）
							第二步：注册组件
							第三步：使用组件

				(第一步)如何定义组件（创建组件）？ —— 使用Vue.extend(options)方法
							使用Vue.extend(options)，其中的options和new Vue(options)中的options几乎一样，但也有点小区别：
									1.组件配置中不能写：el配置，为什么？—— 由vm去决定服务哪个容器，组件跟着走就ok了;
									2.组件配置中的data，必须写成函数，为什么？—— 避免组件复用时产生数据的干扰;
				
				(第二步)如何注册组件？
								局部注册： new Vue({...})时，使用components配置项
								全局注册： Vue.component(组件名，组件的定义)

				(第三步)如何使用组件？—— 编写组件标签即可，例如：<Person></Person>

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 编写组件标签（第三步） -->
			<Person></Person>
			<hr>
			<!-- 编写组件标签（第三步） -->
			<School></School>
			<hr>
			<!-- 编写组件标签（第三步） -->
			<Student></Student>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//创建一个Person组件（第一步）
			let Person = Vue.extend({
				template:`
					<div>
						<h2>人的信息</h2>
						<h4>姓名：{{name}}</h4>
						<h4>年龄：{{age}}</h4>
						<button @click="addAge">年龄+1</button>	
					</div>
				`,
				data(){
					return {
						name:'张三',
						age:18,
					}
				},
				methods:{
					addAge(){
						this.age += 1
					}
				}
			})

			//创建一个School组件（第一步）
			let School = Vue.extend({
				template:`
					<div>
						<h2>学校信息</h2>
						<h4>学校名称：{{name}}</h4>
						<h4>学校地址：{{address}}</h4>
						<button @click="changeName">修改学校名</button>
					</div>
				`,
				data(){
					return {
						name:'尚硅谷',
						address:'宏福科技园'
					}
				},
				methods:{
					changeName(){
						this.name = 'atguigu'
					}
				}
			})

			//创建一个Student组件（第一步）
			let Student = Vue.extend({
				template:`
					<div>
						<h2>学生信息</h2>
						<h4>学生姓名：{{name}}</h4>	
						<h4>学生年龄：{{age}}</h4>	
						<button @click="ageAdd">点我年龄+1</button>
					</div>
				`,
				data(){
					return {
						name:'李四',
						age:18
					}
				},
				methods:{
					ageAdd(){
						this.age += 1
					}
				}
			})

			//创建vm
			new Vue({
				el:'#demo',
				//注册组件（第二步）
				components:{Person,School,Student}
			})
			
		</script>
	</body>
</html>